<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<u-form :model="form1" ref="form1" :label-width="200" input-align="right" :clearable="false">
			<view class="card">
				<view class="title">基础类型</view>
				<view class="content">
					<u-form-item label="单行文本" prop="text">
						<vk-data-input v-model="form1.text" placeholder="请输入单行文本"/>
					</u-form-item>
					<u-form-item label="多行文本" prop="textarea" label-position="top">
						<vk-data-input v-model="form1.textarea" placeholder="请输入多行文本" type="textarea" input-align="left"/>
					</u-form-item>
					<u-form-item label="金额" prop="money">
						<vk-data-input v-model="form1.money" placeholder="请输入金额" type="money" />
						<text class="right-text" slot="right">元</text>
					</u-form-item>
					<!-- 注意: vue3时插槽语法要改成 <template v-slot:right> </template> -->
					<!-- <template v-slot:right>
						<text class="right-text" slot="right">元</text>
					</template> -->
					<u-form-item label="数字输入" prop="number">
						<vk-data-input v-model="form1.number" placeholder="请输入数字" type="number" :precision="2" />
					</u-form-item>
					<u-form-item label="百分比" prop="percentage">
						<vk-data-input v-model="form1.percentage" placeholder="请输入百分比" type="percentage" :precision="2" />
						<text class="right-text" slot="right">%</text>
					</u-form-item>
					<u-form-item label="折扣" prop="discount">
						<vk-data-input v-model="form1.discount" placeholder="请输入内容" type="discount" />
						<text class="right-text" slot="right">折</text>
					</u-form-item>
					<!-- <u-form-item label="密码" prop="password">
						<u-input v-model="form1.password" type="password" :password-icon="true"/>
					</u-form-item> -->
					<u-form-item label="普通步进器" prop="num2">
						<u-number-box v-model="form1.num2" :min="0" :max="100" :step="1"/>
					</u-form-item>
					<u-form-item label="特殊步进器" prop="num3"> 
						<u-number-box v-model="form1.num3" :min="0" :max="100" :step="1" :step-first="10" />
					</u-form-item>
				</view>
			</view>
			
			<view class="card">
				<view class="title">选择类型</view>
				<view class="content">
					<u-form-item label="单选" prop="radio">
						<vk-data-input-radio
							v-model="form1.radio"
							:localdata="[
								{ value: 1, label: '男' },
								{ value: 2, label: '女' },
								{ value: 0, label: '保密' }
							]"
							active-color="var(--main)"
						></vk-data-input-radio>
					</u-form-item>
					<u-form-item label="单选" prop="radio2">
						<vk-data-input-radio
							v-model="form1.radio2"
							:localdata="[
								{ value: 1, label: '选项1' },
								{ value: 2, label: '选项2' },
								{ value: 3, label: '选项3' },
								{ value: 4, label: '选项4' },
								{ value: 5, label: '选项5' }
							]"
							active-color="var(--main)"
						></vk-data-input-radio>
					</u-form-item>
					<u-form-item label="爱好" prop="checkbox">
						<vk-data-input-checkbox
							v-model="form1.checkbox"
							:localdata="[
								{ value: 'lanqiu', label: '篮球' },
								{ value: 'zuqiu', label: '足球' },
								{ value: 'changge', label: '唱歌' },
							]"
							active-color="var(--main)"
						></vk-data-input-checkbox>
					</u-form-item>
					<u-form-item label="爱好" prop="checkbox2">
						<vk-data-input-checkbox
							v-model="form1.checkbox2"
							:localdata="[
								{ value: 1, label: '选项1' },
								{ value: 2, label: '选项2' },
								{ value: 3, label: '选项3' },
								{ value: 4, label: '选项4' },
								{ value: 5, label: '选项5' }
							]"
							active-color="var(--main)"
						></vk-data-input-checkbox>
					</u-form-item>
					<u-form-item label="下拉选择" prop="select">
						<vk-data-input-select
							v-model="form1.select"
							:localdata="[
								{ value: 1, label: '男' },
								{ value: 2, label: '女' },
								{ value: 0, label: '保密' }
							]"
						></vk-data-input-select>
					</u-form-item>
					<u-form-item label="开关" prop="switch">
						<u-switch v-model="form1.switch" active-color="var(--main)"></u-switch>
					</u-form-item>
					<u-form-item label="地区选择" prop="address1">
						<vk-data-input-address v-model="form1.address1"></vk-data-input-address>
					</u-form-item>
					<u-form-item label="地区选择" prop="address2">
						<vk-data-input-address v-model="form1.address2"></vk-data-input-address>
					</u-form-item>
					<u-form-item label="评分" prop="rate">
						<u-rate v-model="form1.rate" :count="5" active-color="var(--main)"></u-rate>
					</u-form-item>
					<u-form-item label="滑块" prop="num1">
						<view style="display: flex;align-items: center;width: 100%;">
							<view style=" flex: 1;"><u-slider v-model="form1.num1" active-color="var(--main)"></u-slider></view>
							<text style="margin-left: 40rpx;">{{ form1.num1 }}</text>
						</view>
					</u-form-item>
				</view>
			</view>
			
			<view class="card">
				<view class="title">时间类型</view>
				<view class="content">
					<u-form-item label="时间到分" prop="time1">
						<vk-data-input-date-time v-model="form1.time1" confirm-color="var(--main)"></vk-data-input-date-time>
					</u-form-item>
					<u-form-item label="时间到秒" prop="time2">
						<vk-data-input-date-time
							v-model="form1.time2"
							:params="{
								year: true,
								month: true,
								day: true,
								hour: true,
								minute: true,
								second: true
							}"
						></vk-data-input-date-time>
					</u-form-item>
					<u-form-item label="时间到日" prop="time3">
						<vk-data-input-date-time
							v-model="form1.time3"
							:params="{
								year: true,
								month: true,
								day: true
							}"
						></vk-data-input-date-time>
					</u-form-item>
					<u-form-item label="时间到月" prop="time4">
						<vk-data-input-date-time
							v-model="form1.time4"
							:params="{
								year: true,
								month: true
							}"
						></vk-data-input-date-time>
					</u-form-item>
					<u-form-item label="时分">
						<vk-data-input-date-time :params='{
							hour: true,
							minute: true
						}' v-model="form1.time5"/>
					</u-form-item>
					<u-form-item label="时分秒">
						<vk-data-input-date-time :params='{
							hour: true,
							minute: true,
							second: true
						}' v-model="form1.time6"/>
					</u-form-item>
					<u-form-item label="日历单选" prop="calendar1">
						<vk-data-input-calendar v-model="form1.calendar1" mode="date" show-week show-is-today></vk-data-input-calendar>
					</u-form-item>
					<u-form-item label="日历范围" prop="calendar2">
						<vk-data-input-calendar v-model="form1.calendar2" mode="range"></vk-data-input-calendar>
					</u-form-item>
				</view>
			</view>
			
			
			<view class="card">
				<view class="title">上传类型</view>
				<vk-data-upload v-model="form1.activity_head_images" :limit="5" :quick-preview="true" 
					uploadText="上传头图" placeholder="用于活动封面，建议尺寸750*380，最多可上传5张" width="750" height="380" ></vk-data-upload>
				<view class="content">
					<u-form-item prop="image">
						<vk-data-upload v-model="form1.image" :limit="1" :show-header="true" title="请上传图片" style="margin-top: 10rpx;"></vk-data-upload>
					</u-form-item>
					<u-form-item prop="images">
						<vk-data-upload v-model="form1.images" :limit="9" :show-header="true" title="请上传图片(最多9张)" style="margin-top: 10rpx;"></vk-data-upload>
					</u-form-item>
				</view>
			</view>
			
			<view class="card">
				<view class="title">特殊键盘类型</view>
				<view class="content">
					<u-form-item label="数字键盘" prop="keyboard1">
						<vk-data-input-keyboard v-model="form1.keyboard1" placeholder="请输入数字" mode="number" :precision="2" :max-num="200"></vk-data-input-keyboard>
					</u-form-item>
					<u-form-item label="身份证键盘" prop="keyboard2">
						<vk-data-input-keyboard v-model="form1.keyboard2" placeholder="请输入身份证" mode="card"></vk-data-input-keyboard>
					</u-form-item>
					<u-form-item label="车牌号键盘" prop="keyboard3">
						<vk-data-input-keyboard v-model="form1.keyboard3" placeholder="请输入车牌号" mode="car"></vk-data-input-keyboard>
					</u-form-item>
					<view style="margin-top: 10rpx;margin-bottom: 10rpx;">
						<u-button @click="payInfo.show = true" type="success">支付键盘</u-button>
						<vk-data-input-keyboard-pay v-model="payInfo.show" :money="payInfo.money" placeholder="请输入支付密码" 
							@success="payInputSuccess"></vk-data-input-keyboard-pay>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">地图联动</view>
				<view class="content">
					<u-form-item label="地图" prop="position.latitude">
						<vk-data-input-map v-model="form1.position" placeholder="请选择地图"/>
					</u-form-item>
					<u-form-item label="地区" prop="position.area.code">
						<vk-data-input-address ref="address" v-model="form1.position"></vk-data-input-address>
					</u-form-item>
					<u-form-item label="街道地址" prop="position.address">
						<u-input v-model="form1.position.address" placeholder="请输入详细地址"/>
					</u-form-item>
				</view>
			</view>
			
			
			<view class="footer">
				<view class="btn-box">
					<view class="secondary-btn" @click="resetFields">重置</view>
					<view class="main-btn" @click="submit">提交</view>
				</view>
			</view>
			
		</u-form>

		<text space="ensp">{{ JSON.stringify(form1, null, 2) }}</text>
		<view style="display: block;height: 100rpx;"></view>

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
var vk = uni.vk;
export default {
	data() {
		// 页面数据变量
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				text: "",
				textarea: "",
				money: "",
				number: "",
				percentage: "",
				discount:"",
				radio: 1,
				checkbox: [],
				select: "",
				password: "",
				switch: false,
				address1: {
					province: {
						code: "330000",
						name: "浙江省"
					},
					city: {
						code: "330100",
						name: "杭州市"
					},
					area: {
						code: "330104",
						name: "江干区"
					}
				},
				address2: {},

				keyboard1: "",
				keyboard2: "",
				keyboard3: "",
				pic: "",

				time: 1596416400000,
				rate: "",
				num1: 50,
				num2: 0,
				num3: 0,
				images: [],
				image: "",
				calendar1: 1596416400000,
				calendar2: "",
				position:{}
			},
			payInfo: {
				show: false,
				money: 100
			},
			rules: {
				text: [
					{ required: true, type: "string", message: "请输入单行文本", trigger: ["blur"] }
				],
				number: [
					{ required: true, type: "number", message: "请输入数字", trigger: ["change", "blur"] }
				],
				images: [
					{ required: true, type: "array", message: "请至少上传1张图片", trigger: ["change", "blur"] }
				],
				mobile: [
					{ validator: uni.vk.pubfn.validator("mobile"),  message: '手机号格式错误', trigger: 'blur' }
				]
			}
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		vk = uni.vk;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
		that.originalForm = vk.pubfn.copyObject(that.form1);
		that.$refs.form1.setRules(that.rules);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			let { form1 } = that;
			setTimeout(function() {
				// form1.images = [
				// 	"https://cdn1.fsq.pub/test/2020-07-23/1595495121378-idmBCx5NbzPYrRaPnFQDiGaRTKAP4Abt-1.png",
				// 	"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
				// ];
				form1.radio = 2;
			}, 1000);
		},
		// 表单提交
		submit() {
			let that = this;
			let { form1 } = that;
			that.$refs.form1.validate(valid => {
				if (valid) {
					vk.callFunction({
						url: '云函数路径',
						title:'请求中...',
						data:form1,
						success:function(data){
							vk.alert("提交成功");
						}
					});
				}
			});
		},
		// 表单重置
		resetFields() {
			let that = this;
			that.$refs["form1"].resetFields();
			that.form1 = vk.pubfn.copyObject(that.originalForm);
		},
		payInputSuccess(pwd) {
			let that = this;
			vk.showLoading("支付中");
			setTimeout(() => {
				vk.hideLoading();
				that.payInfo.show = false;
				vk.toast("支付成功", "success");
			}, 2000);
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
	.app{
		--main: #4590f9;
		--bgcolor: #f8f8fa;
		background-color: var(--bgcolor);
		min-height: calc(100vh - var(--window-top));
		.card{
			background-color: #ffffff;
			margin-top: 20rpx;
			.content{
				padding: 20rpx 30rpx;
				.right-text{
					color: #303133;
				}
			}
			.title{
				padding: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom:1px solid #f8f8fa;
				background-color: #ffffff;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 99;
		.btn-box {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			> view {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.secondary-btn {
				background-color: #ffffff;
			}
			.main-btn {
				background-color: var(--main);
				color: #ffffff;
			}
		}
	}
	

</style>
